<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>添加商品图片页面</title>
    <link rel="stylesheet" rev="stylesheet" href="${path}/backstage/css/style.css" type="text/css" media="all"/>
    <style>
        .success {
            color: green;
        }
        .error {
            color: red;
        }
    </style>
</head>

<body class="ContentBody">
<form:form modelAttribute="image" action="${path}/backstage/image/add" enctype="multipart/form-data" method="post" name="fom" id="fom" target="sypost">
    <div class="MainDiv">
        <table width="99%" border="0" cellpadding="0" cellspacing="0" class="CContent">
            <tr>
                <th class="tablestyle_title">添加商品图片页面</th>
            </tr>
            <tr>
                <td class="CPanel">

                    <table border="0" cellpadding="0" cellspacing="0" style="width:100%">
                        <TR>
                            <TD width="100%">
                                <fieldset style="height:100%;">
                                    <legend>添加商品图片</legend>
                                    <table border="0" cellpadding="2" cellspacing="1" style="width:100%;">
                                        <!--隐藏域：放入pid和imageId-->
                                        <input type="hidden" name="product.pid" id="product.pid" value="${pid}"/>
                                        <input type="hidden" name="imageId" id="imageId" value="${image.imageId}"/>
                                        <tr>
                                            <td width="35%" nowrap align="right">图片类型 ${image.product.pid}</td>
                                            <td  colspan="2">
                                                <select type="text" class="text" name="mark" id="mark">
                                                    <option value="1" <c:if test="${image.mark==1}">selected</c:if>>
                                                        封面图片
                                                    </option>
                                                    <option value="2" <c:if test="${image.mark==2}">selected</c:if>>
                                                        详情图片
                                                    </option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="30%" nowrap align="right">图片描述</td>
                                            <td>
                                                <textarea style="width:370px;height: 80px;" type="text" class="text" name="info" id="info">${image.info}</textarea>
                                            </td>
                                            <td>
                                                <span id="infoError"><form:errors cssClass="error"
                                                                                  path="info"/></span>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td nowrap align="right">商品图片</td>
                                            <td colspan="2">
                                                <input type="button" id="chooseImg" value="选择图片">
                                                <input type="file" style="display: none"  name="file" id="file"/>
                                                <!--隐藏域：放入图片的imgUrl属性值-->
                                                <input type="hidden" id="imgUrl" name="imgUrl" value="${image.imgUrl}">
                                            </td>
                                        </tr>
                                        <tr style="text-align: center;">
                                            <td colspan="3"><img  id="img" name="img"  src="${path}/images/product/${image.imgUrl}"></td>
                                        </tr>
                                    </table>
                                    <br/>
                                </fieldset>
                            </TD>
                        </TR>

                    </TABLE>


                </td>
            </tr>


            <TR>
                <TD colspan="2" align="center" height="50px">
                    <input type="button" name="save" id="save" value="保存" class="button"/>
                    <input type="button" name="Submit2" value="返回" class="button" onclick="window.history.go(-1);"/>
                </TD>
            </TR>
        </TABLE>


        </td>
        </tr>


        </table>

    </div>
</form:form>


<script src="${path}/js/jquery.min.js"></script>
<script>
    $(function () {
        // 获取需要验证的文本框.
        // 获取简介内容输入框
        var info = $("#info");
        var flag = false;
        // 定义一个布尔类型的变量，用来标记商品编号是否都符合条件

        //把用户名输入框的onblur事件与注册按钮的单击事件分开写
        $("#save").click(function addValidate() {
            //初始化flag
            flag = true;
            //如果全部符合条件，则提交表单
            info.blur();
            if(flag){
                $("form:first").submit();
                //$("#fom").submit();
            }
        });

        // 绑定onblur事件
        function initOnblur() {
            // 验证图片描述
            checkData(info, "*长度不超过100", /^[\s\S]{0,100}$/);
        }
        // 定义一个函数,用来检测数据
        // obj代表各个需要验证的输入框
        // info代表span错误时需要显示的内容.
        // fun - 闭包函数
        function checkData(obj, info, reg) {
            var span = obj.parent().next().children(0);
            // 各个文本输入框添加onfocus事件
            obj.focus(function () {
                span.hide();
            });
            // 添加需要验证的文本输入框的onblur事件
            obj.blur(function () {// 为了修改span样式
                // 先获取文本输入框中的内容
                var text = obj.val();
                // 每个验证的regex是不一样的.
                if (reg.test(text)) {
                    // 成功...
                    span.hide();
                } else {
                    // 不成功..
                    flag = false;
                    // 显示错误提示
                    span.removeClass("success");
                    span.addClass("error");
                    span.html(info);
                    span.show();
                }
            });
        }
        // 给表单中的元素绑定onfocus和onblur事件
        initOnblur();
    });
</script>
<script>
    $(function () {
        //按钮单击事件，调用文件标签的单击事件
        $("#chooseImg").click(function() {
            $("#file").click();
        });
        //文件标签onchange事件，改变图片的src和value
        $("#file").change(function() {
            $("#imgUrl").val(this.files[0].name);
            //预览图片(this.files数组是选择的多个图片数组，需在input标签添加multiple属性)
            $("#img").attr("src", window.URL.createObjectURL(this.files[0]));
        });
    });

</script>
</body>
</html>
